<template>
	<view>
		<uni-card>
			<view class="progress-top">
				<image src="../../static/progress.png" mode=""></image>
				<span>工单进度</span>
			</view>
			<view class="progress-bottom">
				<uni-steps :options="list1" active-icon="checkbox" :active="active" />
			</view>
		</uni-card>
		<button type="primary" size="mini" style="margin: 30px 10px; width: 100px;" @click="change">执行完毕</button>
	</view>
</template>

<script>
	export default {
		name: "pages-order-Progress",
		data() {
			return {
				active: 1,
				list1: [{
					title: "已预约"
				}, {
					title: '待接单'
				}, {
					title: '已接单'
				}, {
					title: '检修中'
				}, {
					title: '维修中'
				}, {
					title: '报价中'
				}, {
					title: '已完成'
				}],
			};
		},
		methods: {
			change() {
				if (this.active < this.list1.length - 1) {
					this.active += 1
				} else {
					this.active = 0
				}
			}
		}
	}
</script>

<style lang="less">
	.uni-card {
		height: 200rpx;
		display: flex;
		flex-direction: column;
		// background-color: aqua;

		.progress-top {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			height: 50rpx;
			// background-color: aquamarine;

			image {
				width: 50rpx;
				height: 50rpx;
			}

			span {
				font-size: 1rem;
			}
		}

		.progress-bottom {

			.uni-steps {
				font-size: 0.5rem;
			}
		}
	}
</style>
